<!--
@description ：循环渲染模版
-->

<template>
  <el-row :gutter="24">
    <div v-for="(item, index) in list" :key="index">
      <el-col :span="24" v-if="item.title">
        <el-divider content-position="left">{{ item.title }}</el-divider>
      </el-col>
      <el-col v-for="(itm, ind) in item.children" :key="`${index}:${ind}`" :lg="6" :md="8" :sm="12" :xs="24">
        {{ itm.label }}: {{ itm.value }}
        <span v-if="itm.tag || false">
            <el-tag v-if="itm.tag == '在职'" type="success">在职
            </el-tag>
            <el-tag v-if="itm.tag == '离职'" type="info">离职</el-tag>
        </span>
        <span v-if="itm.lookBtn || false" style="color: rgb(90, 170, 244);cursor: pointer"><i class="el-icon-view" style="margin: 0 2px 0 4px"></i>查看</span>
        <span v-if="itm.detailsBtn || false" style="color: rgb(90, 170, 244);cursor: pointer"><i class="el-icon-search" style="margin: 0 2px 0 4px"></i>查看详情</span>
      </el-col>
    </div>
  </el-row>
</template>
<script>

export default {
  name: "infoListTemplate", //循环渲染模版
  props:{
     list: {
       type: Array,
       default: function() {
         return [];
       }
     }
  },
  components:{

  },
  data(){
    return{

    }
  },
  watch:{

  },
  methods:{

  },
  mounted() {

  },
  created() {
  },
}

</script>

<style lang="scss" scoped>

::v-deep{
  .el-col{
    color: rgb(80, 80, 80);
    font-family: 微软雅黑;
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0px;
    text-align: left;
  }

  .el-tag.el-tag--success {
    background-color: #e6f9ef !important;
    border-color: #e6f9ef !important;
    color: #06c160 !important;
  }

  .el-tag.el-tag--info {
    background-color: #f4f4f5 !important;
    border-color: #e9e9eb !important;
    color: #909399 !important;
  }
}


</style>
